<template>
	<nt-container>

		<u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
		
		<u-form v-if="current==1" :model="userInfo" ref="uForm" style="background-color: #fff;padding: 1rem;">
			<u-form-item label="姓名">{{userInfo.username}}</u-form-item>		
			<u-form-item label="手机">
				<u-input v-model="userInfo.mobile" disabled="" />
				<u-button slot="right" @click="nav('/subpackage/member/pages/update-mobile/index')">修改手机</u-button>
			</u-form-item>	
			<u-form-item label="密码">
				<u-input value="********" disabled="" />
				<u-button slot="right" @click="nav('/subpackage/member/pages/forgot-password/index')">修改密码</u-button>
			</u-form-item>	
			<view class="form-item vertical">
				<view class="form-item__label">上传头像：</view>
				<view class="form-item__content">
					<nt-upload @success="successUpload" :maxCount="1" :images="userInfo.avatar"></nt-upload>
				</view>
			</view>
			<view class="form-item vertical">
				<view class="form-item__label">上传企业微信：</view>
				<view class="form-item__content">
					<nt-upload @success="successUploadWechat" :maxCount="1" :images="userInfo.wechat_qrcode"></nt-upload>
				</view>
			</view>
			<u-button @click="submit">提交修改信息</u-button>
		</u-form>
	
		<nt-card  v-if="current==0">
			<view class="card-item card-image">
				<nt-card-item label="头像" >
					<template #desc>
						<view class="image">
							<nt-cdn-image :src="userInfo.avatar"></nt-cdn-image>
						</view>
					</template>
				</nt-card-item>
			</view>
			<nt-card-item label="姓名" :desc="userInfo.username" ></nt-card-item>
			<nt-card-item label="手机号码" :desc="userInfo.mobile" ></nt-card-item>
			<nt-card-item label="等级" :desc="userInfo.level_name" ></nt-card-item>
			<view class="card-item card-image">
				<nt-card-item label="企业微信" >
					<template #desc>
						<view class="image">
							<nt-cdn-image :src="userInfo.wechat_qrcode"></nt-cdn-image>
						</view>
					</template>
				</nt-card-item>
			</view>
		</nt-card>
	</nt-container>
</template>

<script>
import {
	updateUserInfo
} from "@/api"
import { mapGetters } from "vuex"
export default {
	data() {
		return {
				list: [{
					name: '个人详情'
				}, {
					name: '修改个人信息'
				}],
				current: 0
			// userInfo:{username:'',mobile:'',avatar:'',},
		}
	},
	computed: {
		...mapGetters(["userInfo"])
	},
	onLoad(){
		
	},
	methods: {
		nav(src) {
			uni.navigateTo({
				url: src,
				success: (res) => {
					// 通过eventChannel向被打开页面传送数据
					// res.eventChannel.emit('sendData', it)
				}
			});
		},
		submit(index) {
			var postData = {};
			postData.avatar 		= this.userInfo.avatar;
			postData.wechat_qrcode 	= this.userInfo.wechat_qrcode;						
			updateUserInfo(postData).then(res => {
				const {
					code
				} = res;
				if (code === 1) {
					this.toast("操作成功")
				}
			})
		},
		sectionChange(index) {
			this.current = index;
		},
		// 上传成功
		successUpload(e) {
			this.userInfo.avatar = e.map(o => o.url)
		},
		successUploadWechat(e) {
			this.userInfo.wechat_qrcode = e.map(o => o.url)
		},
	}
}
</script>

<style scoped lang="scss">
/deep/.nt-card-item{
	border-bottom: 1rpx solid #f5f5f5;
	padding: 10rpx 0;
}
.card-image{
	/deep/.nt-card-item{
		height: auto;
		&__desc{
			display:flex;
			align-items: center;
		}
	}
}
.image{
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
	background:#f5f5f5;
}
</style>